<template>
  <el-table
    ref="gridRef"
    :height="height"
    :stripe="stripe"
    :border="border"
    :fit="fit"
    :highlight-current-row="highlightCurrentRow"
    v-bind="$attrs"
    :data="dataList"
    :row-key="gridMeta.idName"
    @selection-change="selectionChange"
    @current-change="currentChange"
  >
    <!--显示选择框-->
    <el-table-column
      type="selection"
      width="55"
      align="center"
      header-align="center"
    >
    </el-table-column>
    <!--显示字段列表-->
    <el-table-column
      v-for="(id, index) in gridMeta.colOrder"
      :key="'grid_list_' + index + '_' + id"
      :min-width="50"
      :column-key="'col_' + id"
      v-bind="itemMeta[id]"
      :prop="itemMeta[id].colName"
    >
    </el-table-column>
    <!--右面的操作列-->
  </el-table>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue'
  import { ElTable, ElTableColumn } from 'element-plus'
  // import type { ElTable } from 'element-plus'
  // 列表控件的属性 
  import { gridProps } from '../map'
 
  import choiceManage from './controller'

  /**
   * 列表控件
   */
  export default defineComponent({
    name: 'nf-elp-grid-list',
    inheritAttrs: false,
    components: {
      ElTable, ElTableColumn
    },
    props: {
      ...gridProps // 解构属性
    },
    setup (props, ctx) {

      // 获取 el-table 
      const gridRef = ref<InstanceType<typeof ElTable>>()

      const { selection, gridMeta } = props

      // 列表选项的事件
      const {
        currentChange, // 单选
        selectionChange // 多选
      } = choiceManage(selection, gridMeta, gridRef)

      return {
        selectionChange, // 多选
        currentChange, // 单选
        gridRef // table 的 dom
      }
    }
  })
</script>
